<template>
    <div class="wrap">
      <div class="top">
        <h1 class="title">永久甄选<a href="javascript:;" class="link icon icon_faq">有疑问</a></h1>
        <div class="integral_info">
          <div class="info">
            <i class="icon icon_coin_large"></i>
            <span class="text">可用积分：<em>3500</em></span>
          </div>
          <a href="javascript:;" class="btn">获取积分</a></div>
      </div>
      <div class="main">
        <div class="swiper_wrap"></div>
        <div class="module_block first_block">
          <div class="block_top">
            <h4 class="title">限时兑换</h4>
            <a href="javascript:;" class="more">全部商品<i class="icon icon_arr_right"></i></a>
          </div>
          <div class="block_items">
            <div class="item">
              <a href="javascript:;" class="item_link">
                <div class="img"><img src="" /></div>
                <h6 class="name">测试文字测试文字测试文字测试文字测试文字测试文字</h6>
                <div class="prices">
                  <span class="num1"><i class="icon icon_coin_small"></i>50000分</span>+
                  <span class="num2">￥100</span>
                </div>
                <div class="other">
                  <span class="num">原价200元</span>
                  <span class="num">积分抵200元</span>
                </div>
              </a>
            </div>
            <div class="item">
              <a href="javascript:;" class="item_link">
                <div class="img"><img src="" /></div>
                <h6 class="name">测试文字测试文字测试文字测试文字测试文字测试文字</h6>
                <div class="prices">
                  <span class="num1"><i class="icon icon_coin_small"></i>50000分</span>+
                  <span class="num2">￥100</span>
                </div>
                <div class="other">
                  <span class="num">原价200元</span>
                  <span class="num">积分抵200元</span>
                </div>
              </a>
            </div>
            <div class="item">
              <a href="javascript:;" class="item_link">
                <div class="img"><img src="" /></div>
                <h6 class="name">测试文字测试文字测试文字测试文字测试文字测试文字</h6>
                <div class="prices">
                  <span class="num1"><i class="icon icon_coin_small"></i>50000分</span>+
                  <span class="num2">￥100</span>
                </div>
                <div class="other">
                  <span class="num">原价200元</span>
                  <span class="num">积分抵200元</span>
                </div>
              </a>
            </div>
            <div class="item">
              <a href="javascript:;" class="item_link">
                <div class="img"><img src="" /></div>
                <h6 class="name">测试文字测试文字测试文字测试文字测试文字测试文字</h6>
                <div class="prices">
                  <span class="num1"><i class="icon icon_coin_small"></i>50000分</span>+
                  <span class="num2">￥100</span>
                </div>
                <div class="other">
                  <span class="num">原价200元</span>
                  <span class="num">积分抵200元</span>
                </div>
              </a>
            </div>
            <div class="item">
              <a href="javascript:;" class="item_link">
                <div class="img"><img src="" /></div>
                <h6 class="name">测试文字测试文字测试文字测试文字测试文字测试文字</h6>
                <div class="prices">
                  <span class="num1"><i class="icon icon_coin_small"></i>50000分</span>+
                  <span class="num2">￥100</span>
                </div>
                <div class="other">
                  <span class="num">原价200元</span>
                  <span class="num">积分抵200元</span>
                </div>
              </a>
            </div>
          </div>
        </div>
        <div class="module_block">
          <div class="block_top">
            <h4 class="title">限时兑换</h4>
            <a href="javascript:;" class="more">全部商品<i class="icon icon_arr_right"></i></a>
          </div>
          <div class="block_items">
            <div class="item">
              <a href="javascript:;" class="item_link">
                <div class="img"><img src="" /></div>
                <h6 class="name">测试文字测试文字测试文字测试文字测试文字测试文字</h6>
                <div class="prices">
                  <span class="num1"><i class="icon icon_coin_small"></i>50000分</span>+
                  <span class="num2">￥100</span>
                </div>
                <div class="other">
                  <span class="num">原价200元</span>
                  <span class="num">积分抵200元</span>
                </div>
              </a>
            </div>
            <div class="item">
              <a href="javascript:;" class="item_link">
                <div class="img"><img src="" /></div>
                <h6 class="name">测试文字测试文字测试文字测试文字测试文字测试文字</h6>
                <div class="prices">
                  <span class="num1"><i class="icon icon_coin_small"></i>50000分</span>+
                  <span class="num2">￥100</span>
                </div>
                <div class="other">
                  <span class="num">原价200元</span>
                  <span class="num">积分抵200元</span>
                </div>
              </a>
            </div>
            <div class="item">
              <a href="javascript:;" class="item_link">
                <div class="img"><img src="" /></div>
                <h6 class="name">测试文字测试文字测试文字测试文字测试文字测试文字</h6>
                <div class="prices">
                  <span class="num1"><i class="icon icon_coin_small"></i>50000分</span>+
                  <span class="num2">￥100</span>
                </div>
                <div class="other">
                  <span class="num">原价200元</span>
                  <span class="num">积分抵200元</span>
                </div>
              </a>
            </div>
            <div class="item">
              <a href="javascript:;" class="item_link">
                <div class="img"><img src="" /></div>
                <h6 class="name">测试文字测试文字测试文字测试文字测试文字测试文字</h6>
                <div class="prices">
                  <span class="num1"><i class="icon icon_coin_small"></i>50000分</span>+
                  <span class="num2">￥100</span>
                </div>
                <div class="other">
                  <span class="num">原价200元</span>
                  <span class="num">积分抵200元</span>
                </div>
              </a>
            </div>
            <div class="item">
              <a href="javascript:;" class="item_link">
                <div class="img"><img src="" /></div>
                <h6 class="name">测试文字测试文字测试文字测试文字测试文字测试文字</h6>
                <div class="prices">
                  <span class="num1"><i class="icon icon_coin_small"></i>50000分</span>+
                  <span class="num2">￥100</span>
                </div>
                <div class="other">
                  <span class="num">原价200元</span>
                  <span class="num">积分抵200元</span>
                </div>
              </a>
            </div>
          </div>
        </div>
        <div class="module_block">
          <div class="block_top">
            <h4 class="title">永久卡券</h4>
            <a href="javascript:;" class="more">全部商品<i class="icon icon_arr_right"></i></a>
          </div>
          <div class="block_items">
            <div class="item">
              <a href="javascript:;" class="item_link">
                <div class="img"><img src="" /></div>
                <h6 class="name">测试文字测试文字测试文字测试文字测试文字测试文字</h6>
                <div class="prices">
                  <span class="num1"><i class="icon icon_coin_small"></i>50000分</span>+
                  <span class="num2">￥100</span>
                </div>
              </a>
            </div>
            <div class="item">
              <a href="javascript:;" class="item_link">
                <div class="img"><img src="" /></div>
                <h6 class="name">测试文字测试文字测试文字测试文字测试文字测试文字</h6>
                <div class="prices">
                  <span class="num1"><i class="icon icon_coin_small"></i>50000分</span>+
                  <span class="num2">￥100</span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
  import Lib from '@/assets/js/Lib'
  export default {
    created() {
      console.log('created')
    },
    mounted() {
      console.log('mounted')
    },
  }
</script>
<style lang="sass">
  @import '../../../assets/css/common.sass'
  .wrap
    width: 100%
    .top
      width: 100%
      min-height: 200rem/$rem
      padding: 34rem/$rem 24rem/$rem
      @include box-sizing()
      background: #fff
      .title
        display: flex
        line-height: 54rem/$rem
        font-size: 48rem/$rem
        .link
          align-self: center
          width: 40rem/$rem
          height: 40rem/$rem
          line-height: 54rem/$rem
          margin-left: 16rem/$rem
          overflow: hidden
          text-indent: -999rem
      .integral_info
        position: relative
        height: 50rem/$rem
        .info
          display: flex
          margin-top: 40rem/$rem
          line-height: 50rem/$rem
          font-size: 28rem/$rem
          align-items: center
          .icon
            align-self: center
            width: 40rem/$rem
            height: 40rem/$rem
            margin-right: 16rem/$rem
          .text
            em
              font-weight: 700
              font-style: normal
        .btn
          @include btnScale()
          position: absolute
          right: 0
          top: 50%
          transform: translateY(-50%)
    .main
      .swiper_wrap
        height: 344rem/$rem
        background: $bgColorGary
      .module_block
        margin-top: 20rem/$rem
        background: #fff
        &.first_block
          margin-top: 0
        .block_top
          position: relative
          height: 48rem/$rem
          padding: 40rem/$rem 24rem/$rem 40rem/$rem
          .title
            height: 48rem/$rem
            line-height: 48rem/$rem
            font-size: 36rem/$rem
            font-weight: 700
          .more
            position: absolute
            right: 24rem/$rem
            top: 50%
            transform: translateY(-50%)
            font-size: 28rem/$rem
            .icon
              width: 12rem/$rem
              height: 22rem/$rem
              margin-left: 16rem/$rem
        .block_items
          @include clearfix()
          padding: 0 24rem/$rem 70rem/$rem
          .item
            width: 327rem/$rem
            margin-top: 75rem/$rem
            &:nth-child(odd)
              float: left
            &:nth-child(even)
              float: right
            &:nth-child(1),
            &:nth-child(2)
              margin-top: 0
            &>a
              display: block
              width: 100%
              .img
                width: 100%
                height: 210rem/$rem
                overflow: hidden
                background: $bgColorGary2
                @include border-radius(10rem/$rem)
              .name
                width: 100%
                height: 32rem/$rem
                margin-top: 20rem/$rem
                overflow: hidden
                text-overflow: ellipsis
                white-space: nowrap
                line-height: 32rem/$rem
                font-size: 30rem/$rem
              .prices
                position: relative
                height: 40rem/$rem
                margin-top: 20rem/$rem
                padding: 0 0 0 40rem/$rem
                line-height: 40rem/$rem
                font-size: 28rem/$rem
                .num1
                  line-height: 40rem/$rem
                  .icon
                    position: absolute
                    left: 0
                    top: 50%
                    transform: translateY(-50%)
                    width: 32rem/$rem
                    height: 32rem/$rem
                .num2
                  color: #f00
              .other
                @include clearfix()
                margin-top: 20rem/$rem
                line-height: 30rem/$rem
                font-size: 24rem/$rem
                color: #999899
                .num
                  &:nth-child(odd)
                    float: left
                  &:nth-child(even)
                    float: right
</style>
